<template>
  <div class="workbench-container">
    <!--  卡片  -->
    <el-row :gutter="20">
      <el-col  v-for="(card, index) in cardList" :key="index"
               class="hover-container"
               style="perspective: 1000px;
                 position: relative;
                 height: 150px;
                 "
               :xs="24" :sm="12" :md="12" :lg="6">
        <!--   class="padding-top-bottom-16  front"  此处少添加一个fornt类名,可以正常保持间距        -->
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex-auto ">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
          </div>
          <div class="count">{{ card.count }} </div>
          <div :class="card.status" class="analyze">{{ card.analyze }}</div>
        </el-card>
      </el-col>
    </el-row>
    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption0" class="charts-common">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10;color: #EE1C25;font-weight: bolder;cursor: pointer" >详情</div>
        </EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption1" class="charts-common">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10;color: #EE1C25;font-weight: bolder;cursor: pointer" >详情</div>
        </EchartsComponent>
      </el-col>
    </el-row>
    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption2" class="charts-common">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10;color: #EE1C25;font-weight: bolder;cursor: pointer" >详情</div>
        </EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption3" class="charts-common">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10;color: #EE1C25;font-weight: bolder;cursor: pointer" >详情</div>
        </EchartsComponent>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;gap: 20px;" class="data-table-container">
      <el-card class="padding-10">
         <el-row :gutter="20">
          <el-col :xs="9" :sm="12" >
            <div class="sub-title">预警提醒</div>
          </el-col>
        </el-row>
         <div class="warning-box">
           <div class="warning-item flex justify-content-space-between align-center">
               <div style="color: #2A2A2A;font-size: 15px">第三支部组织生活会即将超期，请尽快完成</div>
               <el-button  type="primary">立即处理</el-button>
           </div>

           <div class="warning-item flex justify-content-space-between align-center">
             <div style="color: #2A2A2A;font-size: 15px">李明同志本月党费尚未缴纳</div>
             <el-button type="primary">立即处理</el-button>
           </div>

           <div class="warning-item flex justify-content-space-between align-center">
             <div style="color: #2A2A2A;font-size: 15px">第三支部本月志愿活动参与率未达标</div>
             <el-button type="primary">立即处理</el-button>
           </div>
         </div>
      </el-card>
    </div>

    <div style="margin: 20px 0;gap: 20px;" class="data-table-container">
      <el-card class="padding-10">
        <el-row :gutter="20">
          <el-col :xs="9" :sm="12" >
            <div class="sub-title">统计报表</div>
          </el-col>
          <el-col :xs="15" :sm="12">
            <div class="flex align-center justify-content-end">
              <el-button type="primary" icon="download" style="margin: 0 10px">导出</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table :data="tableData"  style="width: 100%;margin-top: 10px;padding-bottom: 20px">
          <el-table-column align="center" prop="committeeName" label="支部名称" />
          <el-table-column align="center" prop="cpcUserCount" label="党员人数" />
          <el-table-column align="center" prop="activityEndRatio" label="组织生活完成率"   >
            <template #default="{ row }">
              <div>{{row.activityEndRatio}}%</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="activityVolRatio" label="志愿者活动参与率">
            <template #default="{ row }">
              <div>{{row.activityVolRatio}}%</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studyTimeCount" label="学习时间"   >
            <template #default="{ row }">
              <div>{{row.studyTimeCount}}h</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studyCount" label="学习课程"   >
            <template #default="{ row }">
              <div>{{row.studyCount}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="feeInfoCount" label="党费收缴率"   >
            <template #default="{ row }">
              <div>{{row.feeInfoCount?row.feeInfoCount:0}}%</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="feeMoneyCount" label="党费金额"   >
            <template #default="{ row }">
              <div>￥{{row.feeMoneyCount}}</div>
            </template>
          </el-table-column>



        </el-table>
      </el-card>
    </div>


  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import {getPBOrganizationTree} from "@/api/relationship/relationship.js";
import {
  getActivityCount,
  getActivityVolCount,
  getCPCActivityInfo,
  getCPCInfoAnalytics,
  getCPCInfoCount, getPBFeeInfoCount, getPBStudyUserCount, getStudyInfos
} from "@/api/work/work.js";
const cardList = ref([
  {
    title: '党员总数',
    count: 2847,
    analyze: '较昨日增长2.8 %',
    status: 'fair'
  },
  {
    title: '组织生活完成率',
    count: 1500,
    analyze: '较昨日持平',
    status: 'decrease'
  },
  {
    title: '志愿活动参与率',
    count: 1500,
    analyze: '较昨日持平',
    status: 'increase'
  },
  {
    title: '党费金额管理',
    count: 1200,
   analyze: '较昨日下降1.5 %',
    status: 'decrease'
  }
]);
const chartOption0 = ref({
  title: {text: '党员结构分析'},
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '10%',
    top: 'middle',
    data: ['在职党员', '退休党员', '流动党员', '预备党员']
  },
  series: [
    {
      name: '手术类型',
      type: 'pie',
      radius: ['40%', '70%'], // 设置内环和外环的半径比例
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}: {d}%' // 显示标签格式
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 35, name: '在职党员' },
        { value: 25, name: '退休党员' },
        { value: 20, name: '流动党员' },
        { value: 20, name: '预备党员' }
      ]
    }
  ],
  color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'] // 设置颜色
});
const chartOption1 = ref({
  title: { text: '组织生活开展情况' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      data: [12, 20, 15, 80, 70, 10, 13],
      type: 'bar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#EE1C25' // 渐变起始颜色
            }],
          global: false // 缺省为 false
        }
      }
    }
  ]
});
const chartOption2 = ref({
  title: {
    text: '学习任务完成情况'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['学习时长', '学习课程']
  },
  xAxis: {
    type: 'value',
    name: '时长/课程数量'
  },
  yAxis: {
    type: 'category',
    data: ['第五党支部', '第四党支部', '第三党支部', '第二党支部', '第一党支部']
  },
  series: [
    {
      name: '学习时长',
      type: 'bar',
      data: [35, 30, 25, 32, 28], // 模拟数据，可根据实际调整
      label: {
        show: true,
        position: 'right'
      },
      itemStyle: {
        color: '#EE1C25' // 深蓝色
      }
    },
    {
      name: '学习课程',
      type: 'bar',
      data: [20, 16, 14, 18, 15], // 模拟数据，可根据实际调整
      label: {
        show: true,
        position: 'right'
      },
      itemStyle: {
        color: '#EE1C25' // 深蓝色
      }
    }
  ]
});
const chartOption3 = ref({
  title: { text: '党费收缴趋势' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      data:[44, 41, 42, 41, 42,43,42],
      type: 'line',
      areaStyle: {
        color: 'rgba(255,156,158,0.31)'
      },
      lineStyle: {
        color: '#EE1C25', // 折线颜色（这里使用了深红色）
        width: 2          // 折线宽度
      },
      itemStyle: {
        color: '#EE1C25'  // 数据点颜色
      }
    }
  ]
});
const tableData = ref([]);
const getStatus = (num) => {
  let count = Number(num);
  if (count > 0) {
    return {
      desc: "较上月增长" + count + " %",
      status: 'increase'
    }
  } else if (count < 0) {
    // 注意：根据您的示例，这里使用了固定的1.5而不是count的绝对值
    return {
      desc: "较上月下降" + Math.abs(count) + " %",
      status: 'decrease'
    }
  } else {
    return {
      desc: "较上月持平",
      status: 'fair'
    }
  }
}

// API 接口对接调试
// 获取工作台面板
const getCPCInfoCountList = async () => {
  let result1 = await getCPCInfoCount();
  let result2 = await getActivityCount();
  let result3 = await getActivityVolCount();
  let data1 = result1.data.data;
  let data2 = result2.data.data;
  let data3 = result3.data.data;
  if (result1.status == 200 && result1.data.code == 200){
     cardList.value = [
       { title: '党员总数', count: data1.cpcUserCount, analyze: getStatus(data1.cpcUserRatio).desc, status: getStatus(data1.cpcUserRatio).status},
       { title: '组织生活完成率', count: data2.activityEndRatio, analyze: getStatus(data2.activityRatio).desc, status: getStatus(data2.activityRatio).status},
       { title: '志愿活动参与率', count: data3.activityVolRatio, analyze: getStatus(data3.activityRatio).desc, status: getStatus(data3.activityRatio).status},
       { title: '党费金额管理', count: 0, analyze: getStatus(0).desc, status: getStatus(0).status}
     ]
  }
}
// 党员结构分析
const getCPCInfoAnalyticsData = async () => {
  let result = await getCPCInfoAnalytics();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData =  [
      { value: data.cpcrzStatusCount, name: '在职党员' },
      { value: data.cpcRetStatusCount, name: '退休党员' },
      { value: data.cpcFlowStatusCount, name: '流动党员' },
      { value: data.cpcPrepStatusCount, name: '预备党员' }
    ];
    chartOption0.value.series[0].data = seriesData;
  }
}
// 组织生活开展情况
const getCPCActivityData = async () => {
  let result = await getCPCActivityInfo();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData =  [];
    const xAxisData = [];
    data.forEach(item=>{
       xAxisData.push( item.activityYear + "年" +item.activityMonth + "月");
       seriesData.push(item.activityInfoCount);
    });
    chartOption1.value.xAxis.data = xAxisData;
    chartOption1.value.series[0].data = seriesData;

  }
}

// 学习任务完成进度
const getStudyUserData = async () => {
  let result = await getPBStudyUserCount();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const courseList = [];
    const studyTime = [];
    const xAxisData = [];
    data.forEach(item=>{
      courseList.push(item.studyCount);
      studyTime.push(item.studyTimeCount);
      xAxisData.push(item.committeeName);
    });
    chartOption2.value.yAxis.data = xAxisData;
    chartOption2.value.series[0].data = studyTime;
    chartOption2.value.series[1].data = courseList;
  }
}

// 党费收缴趋势
const getFeeInfoData = async () => {
  let result = await getPBFeeInfoCount();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData =  [];
    const xAxisData = [];
    data.forEach(item=>{
      xAxisData.push( item.feeYear + "年" +item.feeMonth + "月");
      seriesData.push(item.feeInfoCount);
    });
    chartOption3.value.xAxis.data = xAxisData;
    chartOption3.value.series[0].data = seriesData;
  }
}


// 党费收缴趋势
const getStudyInfosList = async () => {
  let result = await getStudyInfos();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    tableData.value = data;
  }
}


getCPCInfoCountList();
getCPCInfoAnalyticsData();
getCPCActivityData();
getStudyUserData();
getFeeInfoData();
getStudyInfosList();








</script>
<style lang='scss' scoped>
.workbench-container {
  height: 100%;
  padding-top: 20px;
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 26px;
    font-weight: 600;
    padding: 14px 0;
  }
  .analyze {
    font-size: 16px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #EE1C25;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }


}
.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏元素背面 */
  transition: transform 0.9s ease; /* 添加过渡效果，时长 0.6 秒，缓动函数为 ease */
}
.front {
  z-index: 2;
}
.back {
  transform: rotateY(180deg); /* 初始时背面旋转 180 度隐藏 */
}
.hover-container:hover .front {
  transform: rotateY(180deg); /* 鼠标悬浮时正面旋转 180 度隐藏 */
}
.hover-container:hover .back {
  transform: rotateY(0deg); /* 鼠标悬浮时背面旋转到 0 度显示 */
}
::v-deep .charts-common .el-button {
  height: fit-content;
  padding:5px;
}
.sub-title{
   font-weight: bolder;
   margin-top: 20px;
   font-size: 20px;
   color: #464646;
}
.warning-box{
   padding: 0 0 10px 0;
  .warning-item{
     border-bottom: 1px solid #F1F2F5;
     margin: 5px 0;
     padding: 5px 0;
  }
}

</style>
